import React, {Component} from 'react';
import './main.module.less'

import {Switch, Route, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'   // 用户包装发送axios用的


// tarbar页面
import posts from '../posts/posts'
import discover from '../discover/discover'
import chat from '../chat/chat'
import my from '../my/my'

// 其他页面
import Setting from "../Setting/Setting";
import ChatInterface from "../ChatInterface/ChatInterface";
import SearchPage from "../SearchPage/SearchPage";
import PostDetail from "../postDetail/postDetail";
import RecruiterHomePage from "../RecruiterHomePage/RecruiterHomePage";
import CompanyHomepage from "../CompanyHomepage/CompanyHomepage";

// 组件
import YangTarbar from '../../components/tarbar/yang-tarbar';

// 逻辑js文件
import {GetCookie} from '../../redux/LogicalOperation'

// 接口

import {$GetUserInfo} from '../../redux/action' // 获取包装好的接口

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            IsHideTatbar: false,
        };
    }

    // 底部tarbar配置表
    TarBarList = [
        {
            path: "/posts",
            title: "职位",
            key: "01",
            icon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/zhiwie1.svg",
            selectedIcon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/zhiwei2.svg",
            selected: true
        }, {
            path: "/discover",
            title: "发现",
            key: "02",
            icon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/discover1.svg",
            selectedIcon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/discover2.svg",
            selected: false
        }, {
            path: "/chat",
            title: "聊天",
            key: "03",
            icon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/chat1.svg",
            selectedIcon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/chat2.svg",
            selected: false
        }, {
            path: "/my",
            title: "我的",
            key: "04",
            icon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/my1.svg",
            selectedIcon: "https://cdnforspeed.oss-cn-beijing.aliyuncs.com/yang-ping/tarbar/my2.svg",
            selected: false
        }]

    // 改变state内某条属性的值
    onChangeState(type, value) {
        this.setState({
            [type]: value
        })
    }


    // 初始化 逻辑判断
    async initJudge() {
        let token = GetCookie()
        if (token) await this.props.$GetUserInfo(); // 只有有token才触发
    }

    componentDidMount() {
        this.initJudge()
    }

    render() {
        let path = this.props.location.pathname

        let a = 'background: #606060; color: #fff; border-radius: 3px 0 0 3px;'
        let b = 'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;'
        console.log(`%c 洋聘: %c ${'当前的路径'} `, a, b, path)

        if (!GetCookie('token')) return <Redirect to="/Login"/>
        if (path === '/') return <Redirect to="/posts"/>

        // 控制tarbar页面的显示与否
        let isHideTabBar = this.TarBarList.findIndex(i => i.path === path) === -1 ? true : false
        return (
            <div>
                <Switch>
                    <Route path='/posts' component={posts}/>
                    <Route path='/discover' component={discover}/>
                    <Route path='/chat' component={chat}/>
                    <Route path='/my' component={my}/>
                    {/*<Route component={NotFound}/>*/}
                    <Route path='/Setting' component={Setting}/>
                    <Route path='/ChatInterface' component={ChatInterface}/>
                    <Route path='/SearchPage' component={SearchPage}/>
                    <Route path='/PostDetail' component={PostDetail}/>
                    <Route path='/RecruiterHomePage' component={RecruiterHomePage}/>
                    <Route path='/CompanyHomepage' component={CompanyHomepage}/>

                </Switch>
                {!isHideTabBar ?
                    <YangTarbar TarBarList={this.TarBarList} IsHideTatbar={this.state.IsHideTatbar}></YangTarbar> : ""}
            </div>
        );
    }
}

export default connect(
    state => ({UserInfo: state.UserInfo}),
    {$GetUserInfo}
)(Main);